<template>
  <div class="system-settings">
    <el-tabs v-model="activeTab" class="settings-tabs">
      <el-tab-pane label="基本设置" name="basic">
        <BasicSettings />
      </el-tab-pane>
      <el-tab-pane label="通知设置" name="notification">
        <NotificationSettings />
      </el-tab-pane>
      <el-tab-pane label="安全设置" name="security">
        <SecuritySettings />
      </el-tab-pane>
      <el-tab-pane label="系统日志" name="logs">
        <SystemLogs />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BasicSettings from './settings/BasicSettings.vue'
import NotificationSettings from './settings/NotificationSettings.vue'
import SecuritySettings from './settings/SecuritySettings.vue'
import SystemLogs from './settings/SystemLogs.vue'

const activeTab = ref('basic')
</script>

<style scoped>
.system-settings {
  width: 100%;
}

.settings-tabs {
  margin-top: 10px;
}
</style> 